衷于栖
  • 衷于栖
  • 首页
  • 归档
  • 关于
Image
Profile Picture

衷于栖

自由开发者

分类目录

三维技术4 介绍2 应用1 异常1 技术笔记17 游戏2 源码解读3 管理5 读书笔记3 车联网3 转载11 随笔3

热门标签

  • GIT
  • 工作流指南
  • docker
  • SCRUM
  • JT808
  • 百度地图
  • 狼人杀
  • 模型数据结构
  • 敏捷
  • 扩展
  • 学习WEBGL系列
  • 可维护
  • GlTF
  • CentOS
  • 高德地图
  • 集中式
  • 郭麒麟
  • 郭德纲
  • 进阶
  • 路由节点编辑器

微信订阅

Image

友情链接

王海达博客 Steve Yegge Debug 客栈 Codelei's Blog 笛卡尔积 Java九点半课堂 薛定喵君

【WebGL】WebGL API 详解

2020-01-22     三维技术


基于 WebGL Specifications 最全面的API释疑。

20201224 更新，删除其他标题，分类到对应标题下并添加注释

类型以及对象定义

这部分内容主要定义一部分类型和数据结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
typedef unsigned long  GLenum;
typedef boolean        GLboolean;
typedef unsigned long  GLbitfield;

typedef byte           GLbyte;
typedef short          GLshort;
typedef long           GLint;
typedef long           GLsizei;
typedef long long      GLintptr;
typedef long long      GLsizeiptr;

// 这个类型应该是 无符号整型 8位
// 但是Web IDL中并不存在这种类型
// 所以用 octet 代替 占位
typedef octet          GLubyte;
typedef unsigned short GLushort;
typedef unsigned long  GLuint;
typedef unrestricted float GLfloat;
typedef unrestricted float GLclampf;

// 由 WebGLContextAttributes 引用
enum WebGLPowerPreference { "default", "low-power", "high-performance" };

// 获取上下文时支持的参数
// getContext('webgl', <WebGLContextAttributes>)
dictionary WebGLContextAttributes {
    boolean alpha = true;
    boolean depth = true;
    boolean stencil = false;
    boolean antialias = true;
    boolean premultipliedAlpha = true;
    boolean preserveDrawingBuffer = false;
    WebGLPowerPreference powerPreference = "default";
    boolean failIfMajorPerformanceCaveat = false;
};

// [Exposed=(Window,Worker)] 代表可以同时在主线程和后台线程使用本对象

[Exposed=(Window,Worker)]
interface WebGLObject {};

[Exposed=(Window,Worker)]
interface WebGLBuffer : WebGLObject {};

[Exposed=(Window,Worker)]
interface WebGLFramebuffer : WebGLObject {};

[Exposed=(Window,Worker)]
interface WebGLProgram : WebGLObject {};

[Exposed=(Window,Worker)]
interface WebGLRenderbuffer : WebGLObject {};

[Exposed=(Window,Worker)]
interface WebGLShader : WebGLObject {};

[Exposed=(Window,Worker)]
interface WebGLTexture : WebGLObject {};

[Exposed=(Window,Worker)]
interface WebGLUniformLocation {};

[Exposed=(Window,Worker)]
interface WebGLActiveInfo {
    readonly attribute GLint size;
    readonly attribute GLenum type;
    readonly attribute DOMString name;
};

[Exposed=(Window,Worker)]
interface WebGLShaderPrecisionFormat {
    readonly attribute GLint rangeMin;
    readonly attribute GLint rangeMax;
    readonly attribute GLint precision;
};

typedef (ImageBitmap or
         ImageData or
         HTMLImageElement or
         HTMLCanvasElement or
         HTMLVideoElement or
         OffscreenCanvas) TexImageSource;

typedef ([AllowShared] Float32Array or sequence<GLfloat>) Float32List;
typedef ([AllowShared] Int32Array or sequence<GLint>) Int32List;

interface mixin WebGLRenderingContextBase {
    // 内容整理到 'WebGLRenderingContext 对象'
}

interface mixin WebGLRenderingContextOverloads {
    // 内容整理到 'WebGLRenderingContext 对象'
}

[Exposed=(Window,Worker)]
interface WebGLRenderingContext {
    // 内容整理到 'WebGLRenderingContext 对象'
};
WebGLRenderingContext includes WebGLRenderingContextBase;
WebGLRenderingContext includes WebGLRenderingContextOverloads;

[Exposed=(Window,Worker),
 Constructor(DOMString type,
 optional WebGLContextEventInit eventInit)]
interface WebGLContextEvent : Event {
    readonly attribute DOMString statusMessage;
};

// EventInit is defined in the DOM4 specification.
dictionary WebGLContextEventInit : EventInit {
    DOMString statusMessage = "";
};

WebGLRenderingContext 对象

上下文相关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
[Exposed=Window] readonly attribute (HTMLCanvasElement or OffscreenCanvas) canvas;
// 可以在 Web Work 上使用 canvas api
// 需要调用 canvas.transferControlToOffscreen() 将渲染权转移给后台线程
[Exposed=Worker] readonly attribute OffscreenCanvas canvas;
readonly attribute GLsizei drawingBufferWidth;
readonly attribute GLsizei drawingBufferHeight;

// 返回类似下列上下文参数
// { 
//   alpha: true, 
//   antialias: true, 
//   depth: true, 
//   failIfMajorPerformanceCaveat: false, 
//   premultipliedAlpha: true, 
//   preserveDrawingBuffer: false, 
//   stencil: false 
// }
// 可以通过下列方法设置
// canvas.getContext('webgl', { antialias: false, depth: false });
[WebGLHandlesContextLoss] WebGLContextAttributes? getContextAttributes();
// 标记上下文是否已经丢失
[WebGLHandlesContextLoss] boolean isContextLost();
// 阻断执行，直到之前所有的操作都完成。
void finish();
// 清空缓冲的命令，这会导致所有命令尽快执行完。
void flush();

/* HintTarget */
const GLenum GENERATE_MIPMAP_HINT            = 0x8192;

/* HintMode */
const GLenum DONT_CARE                      = 0x1100;
const GLenum FASTEST                        = 0x1101;
const GLenum NICEST                         = 0x1102;

// 给某些行为设置建议使用的模式。具体建议需要看执行的情况。
void hint(GLenum target, GLenum mode);

// 返回给入的缓冲是否有效。
[WebGLHandlesContextLoss] GLboolean isBuffer(WebGLBuffer? buffer);
// 测试这个上下文的WebGL功能是否开启。
[WebGLHandlesContextLoss] GLboolean isEnabled(GLenum cap);
// 返回 Boolean 值，表示给入的 WebGLFrameBuffer 对象是否有效。
[WebGLHandlesContextLoss] GLboolean isFramebuffer(WebGLFramebuffer? framebuffer);
// 返回一个 Boolean 值，表示给入的 WebGLProgram 是否有效。
[WebGLHandlesContextLoss] GLboolean isProgram(WebGLProgram? program);
[WebGLHandlesContextLoss] GLboolean isRenderbuffer(WebGLRenderbuffer? renderbuffer);
[WebGLHandlesContextLoss] GLboolean isShader(WebGLShader? shader);
[WebGLHandlesContextLoss] GLboolean isTexture(WebGLTexture? texture);

// 为抗锯齿效果设置多重取样覆盖参数。
void sampleCoverage(GLclampf value, GLboolean invert);

视口相关

1
2
3
4
// 设置视口宽度
void viewport(GLint x, GLint y, GLsizei width, GLsizei height);
// 设置裁剪框。
void scissor(GLint x, GLint y, GLsizei width, GLsizei height);

缓冲区配置

配置缓冲区默认值

1
2
3
4
5
6
7
// 配置指定缓冲区为指定的值（参数范围都是 0.0 - 1.0）
// clearColor 为颜色缓冲区指定值 默认 0.0, 0.0, 0.0, 0.0
// clearDepth 为深度缓冲区指定值 默认 1.0
// clearStencil 为模板缓冲区指定值 默认 0
void clearColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);
void clearDepth(GLclampf depth);
void clearStencil(GLint s);

配置颜色缓冲区处理方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 透明混合参数
// blendFunc 的 sfactor dfactor 参数
const GLenum ZERO                           = 0;
const GLenum ONE                            = 1;
const GLenum SRC_COLOR                      = 0x0300;
const GLenum ONE_MINUS_SRC_COLOR            = 0x0301;
const GLenum SRC_ALPHA                      = 0x0302;
const GLenum ONE_MINUS_SRC_ALPHA            = 0x0303;
const GLenum DST_ALPHA                      = 0x0304;
const GLenum ONE_MINUS_DST_ALPHA            = 0x0305;

// blendFunc 的 sfactor 参数
const GLenum DST_COLOR                      = 0x0306;
const GLenum ONE_MINUS_DST_COLOR            = 0x0307;
const GLenum SRC_ALPHA_SATURATE             = 0x0308;

// blendEquation 的 mode 参数
const GLenum FUNC_ADD                       = 0x8006;
const GLenum FUNC_SUBTRACT                  = 0x800A;
const GLenum FUNC_REVERSE_SUBTRACT          = 0x800B;

// 通过参数 sfactor 和 dfactor 指定进行混合操作的函数 混合后的颜色如下计算
// 混合后颜色 = 源颜色 * sfactor + 目标颜色 * dfactor
// @param sfactor 见此方法上枚举
// @param dfactor 见此方法上枚举
void blendFunc(GLenum sfactor, GLenum dfactor);
// 同上 只是分开设置RGB 和 ALPHA
void blendFuncSeparate(GLenum srcRGB, GLenum dstRGB, GLenum srcAlpha, GLenum dstAlpha);
// 设置源和目标混合因子 值范围 在0到1之间
void blendColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);

// 将RGB混合方程和阿尔法混合方程设置为单个方程。
// 混合方程式确定新像素如何与 WebGLFramebuffer 中的像素组合
// @ext EXT_blend_minmax
void blendEquation(GLenum mode);
// 同上 只是分开设置RGB 和 ALPHA
// @ext EXT_blend_minmax
void blendEquationSeparate(GLenum modeRGB, GLenum modeAlpha);
// 设置在绘制或渲染WebGLFramebuffer时要开启或关闭的颜色分量。
void colorMask(GLboolean red, GLboolean green, GLboolean blue, GLboolean alpha);

配置裁剪面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// cullFace 的 mode 参数
const GLenum FRONT                          = 0x0404;
const GLenum BACK                           = 0x0405;
const GLenum FRONT_AND_BACK                 = 0x0408;

/* FrontFaceDirection */
const GLenum CW                             = 0x0900;
const GLenum CCW                            = 0x0901;

// 设置多边形的正面或反面是否要被排除。
// gl.enable(gl.CULL_FACE);
// gl.cullFace(gl.FRONT_AND_BACK);
// gl.getParameter(gl.CULL_FACE_MODE) === gl.FRONT_AND_BACK;
void cullFace(GLenum mode);
// 设置多边形的正面使用顺时针还是逆时针绘制表示。
void frontFace(GLenum mode);

配置深度缓冲区处理方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// depthFunc 的 func 参数
const GLenum NEVER                          = 0x0200;
const GLenum LESS                           = 0x0201;
const GLenum EQUAL                          = 0x0202;
const GLenum LEQUAL                         = 0x0203;
const GLenum GREATER                        = 0x0204;
const GLenum NOTEQUAL                       = 0x0205;
const GLenum GEQUAL                         = 0x0206;
const GLenum ALWAYS                         = 0x0207;

// 设置比较输入像素深度和深度缓存值得函数
// gl.enable(gl.DEPTH_TEST);
// gl.depthFunc(gl.NEVER);
// gl.getParameter(gl.DEPTH_FUNC) === gl.NEVER;
void depthFunc(GLenum func);
// 设置从规范化设备坐标映射到窗口或视口坐标时的深度范围。
void depthRange(GLclampf zNear, GLclampf zFar);
// 锁定或者释放深度缓冲区的写入操作
// @param flag false 只读 true 可读写
void depthMask(GLboolean flag);

配置线宽

1
2
// 设置线宽。无效
void lineWidth(GLfloat width);

配置模板缓冲区处理方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* StencilOp */
/* ZERO */
const GLenum KEEP                           = 0x1E00;
const GLenum REPLACE                        = 0x1E01;
const GLenum INCR                           = 0x1E02;
const GLenum DECR                           = 0x1E03;
const GLenum INVERT                         = 0x150A;
const GLenum INCR_WRAP                      = 0x8507;
const GLenum DECR_WRAP                      = 0x8508;

// 同时设置前面和背面的模板测试函数，及其引用值。
void stencilFunc(GLenum func, GLint ref, GLuint mask);
// 可分开设置前面或背面的模板测试函数，及其引用值。
void stencilFuncSeparate(GLenum face, GLenum func, GLint ref, GLuint mask);
// 同时启用或禁用，前面和背面的模板测试掩码。
void stencilMask(GLuint mask);
// 可分开启用或禁用，前面和背面的模板测试掩码。
void stencilMaskSeparate(GLenum face, GLuint mask);
// 同时设置，在前面和背面的模板缓冲区上执行的操作。
void stencilOp(GLenum fail, GLenum zfail, GLenum zpass);
// 可分开设置，在前面和背面的模板缓冲区上执行的操作。
void stencilOpSeparate(GLenum face, GLenum fail, GLenum zfail, GLenum zpass);

缓冲区相关方法

清理缓冲区

1
2
3
4
5
6
7
8
9
// 缓冲区类型
// 为 gl.clear 的参数
const GLenum DEPTH_BUFFER_BIT               = 0x00000100;
const GLenum STENCIL_BUFFER_BIT             = 0x00000400;
const GLenum COLOR_BUFFER_BIT               = 0x00004000;

// 清理指定缓缓冲区内容, 可以通过或运算符一次清理多个类型的缓冲区
// @param mask 颜色缓冲区（COLOR_BUFFER_BIT） | 深度缓冲区（DEPTH_BUFFER_BIT） | 模板缓冲区（STENCIL_BUFFER_BIT）
void clear(GLbitfield mask);

读取缓冲区

1
2
3
4
5
6
7
// 从颜色缓冲区中读取 x y width height 参数确定的矩形块中的所有像素值 并保存在pixels指定的数组中
// @param x y 选择矩形区域左上角坐标
// @param width height 选择矩形区域的宽 长
// @param format 指定像素值的颜色格式 必须为 gl.RGB
// @param type 指定像素值得数据格式 必须是 gl.UNSIGNED_BYTE
// @param pixels 类型化数组 Unit8Array
void readPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);

帧缓冲区

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/* Framebuffer Object. */
const GLenum FRAMEBUFFER                    = 0x8D40;
const GLenum RENDERBUFFER                   = 0x8D41;

// 表示渲染缓冲区将替代颜色缓冲区中的数据格式
const GLenum RGBA4                          = 0x8056;
const GLenum RGB5_A1                        = 0x8057;
const GLenum RGB565                         = 0x8D62;
// 表示渲染缓冲区将替代深度缓冲区中的数据格式
const GLenum DEPTH_COMPONENT16              = 0x81A5;
// 表示渲染缓冲区将替代模板缓冲区中的数据格式
const GLenum STENCIL_INDEX8                 = 0x8D48;

// 帧缓冲区作为 attachment（附件）的参数
// 颜色附件 深度附件 模板附件 模板深度附件
const GLenum COLOR_ATTACHMENT0              = 0x8CE0;
const GLenum DEPTH_ATTACHMENT               = 0x8D00;
const GLenum STENCIL_ATTACHMENT             = 0x8D20;
const GLenum DEPTH_STENCIL_ATTACHMENT       = 0x821A;

// ============
// = 渲染缓冲区
// ============

// 创建渲染缓冲区对象
WebGLRenderbuffer? createRenderbuffer();

// 删除渲染缓冲区对象
void deleteRenderbuffer(WebGLRenderbuffer? renderbuffer);

// 将 renderbuffer 指定的渲染缓冲区对象绑定在target目标上
// 如果 renderbuffer 为 null 则将已经绑定在target目标上的渲染缓冲区对象解除绑定
// @param target 必须是 gl.RENDERBUFFER
void bindRenderbuffer(GLenum target, WebGLRenderbuffer? renderbuffer);

// 创建并初始化渲染缓冲区的数据区
// @param target 必须是 gl.RENDERBUFFER
// @param internalformat 指定渲染缓冲区中的数据格式 见方法上枚举
// @param width height 指定渲染缓冲区的宽度和高度 单位像素
void renderbufferStorage(GLenum target, GLenum internalformat, GLsizei width, GLsizei height);

// ==========
// = 帧缓冲区
// ==========

// 创建帧缓冲区对象
WebGLFramebuffer? createFramebuffer();

// 删除帧缓冲区对象
void deleteFramebuffer(WebGLFramebuffer? framebuffer);

// 绑定帧缓冲区
// FBO就是由颜色附件（COLOR_ATTACHMENT0)，深度附件（DEPTH_ATTACHMENT），模板附件（STENCIL_ATTACHMENT）组成的一个逻辑存储对象
// RBO是一个2D图像缓冲区，可以用于分配和存储颜色值，深度或者模板值，可以作为FBO的颜色，深度模板附件。
void bindFramebuffer(GLenum target, WebGLFramebuffer? framebuffer);

// 设置纹理为 attachment 附件
void framebufferTexture2D(GLenum target, GLenum attachment, GLenum textarget, WebGLTexture? texture, GLint level);
// 设置渲染缓冲区对象为 attachment 附件
void framebufferRenderbuffer(GLenum target, GLenum attachment, GLenum renderbuffertarget, WebGLRenderbuffer? renderbuffer);

// 检查帧缓冲区
[WebGLHandlesContextLoss] GLenum checkFramebufferStatus(GLenum target);

缓存对象

使用缓存的五个步骤

  1. createBuffer
  2. bindBuffer
  3. bufferData
  4. vertexAttribPointer
  5. enableVertexAttribArray
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// 缓存对象
// bindBuffer 第一个参数
const GLenum ARRAY_BUFFER                   = 0x8892;
const GLenum ELEMENT_ARRAY_BUFFER           = 0x8893;
// const GLenum ARRAY_BUFFER_BINDING           = 0x8894;
// const GLenum ELEMENT_ARRAY_BUFFER_BINDING   = 0x8895;

// 绘制模式
// 下文中的usage参数值
const GLenum STREAM_DRAW                    = 0x88E0;
const GLenum STATIC_DRAW                    = 0x88E4;
const GLenum DYNAMIC_DRAW                   = 0x88E8;

// 数据类型
// vertexAttribPointer 中参数type的取值
const GLenum BYTE                           = 0x1400;
const GLenum UNSIGNED_BYTE                  = 0x1401;
const GLenum SHORT                          = 0x1402;
const GLenum UNSIGNED_SHORT                 = 0x1403;
const GLenum INT                            = 0x1404;
const GLenum UNSIGNED_INT                   = 0x1405;
const GLenum FLOAT                          = 0x1406;

// 创建缓冲区对象
WebGLBuffer? createBuffer();

// 允许使用buffer表示的缓冲区对象并将其绑定到target表示的目标上
// @param target 
//        ARRAY_BUFFER 表示缓冲区对象中包含顶点数据
//        ELEMENT_ARRAY_BUFFER 表示缓冲去对象中包含了顶点的索引值
void bindBuffer(GLenum target, WebGLBuffer? buffer);

// 开辟存储空间，向绑定在target上的缓冲区对象写入数据data
// @param target 同上
// @param data 类型化数组 比如：Float32Array...
// @param usage 优化效率 可以是以下值：
//        STATIC_DRAW 只会向缓冲区写入一次数据 需要绘制很多次
//        STREAM_DRAW 只会向缓冲区写入一次数据 需要绘制若干次
//        DYNAMIC_DRAW 会向缓冲区对象中多次写入数据 并绘制很多次
void bufferData(GLenum target, [AllowShared] BufferSource? data, GLenum usage);
void bufferData(GLenum target, GLsizeiptr size, GLenum usage);
void bufferSubData(GLenum target, GLintptr offset, [AllowShared] BufferSource data);

// 将绑定到ARRAY_BUFFER的缓冲区对象分配给index指定的attribute变量
// @param index 指向attribute变量
// @param size 指定缓冲区中每个顶点分量的个数
// @param type 数据格式 见上面的枚举
// @param normalized 是否将浮点型数据归一化到[0, 1]或者[-1, 1]区间
// @param stride 指定相邻两个顶点之间的字节数 默认是0
// @param offset 指定缓冲区对象中的偏移量 单位字节 可以利用这个偏移量赋值多个attribute
void vertexAttribPointer(GLuint index, GLint size, GLenum type, GLboolean normalized, GLsizei stride, GLintptr offset);

// 开启index对应的attribute对象
// 开启后不能通过 vertexAttrib[1234]f 传值
void enableVertexAttribArray(GLuint index);

// 关闭index对应的attribute对象
void disableVertexAttribArray(GLuint index);

// 删除参数buffer表示的缓冲区对象
// @param buffer 缓冲区对象 由createBuffer创建
void deleteBuffer(WebGLBuffer? buffer);

attribute 相关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 获取由 name 参数指定的 attribute 变量存储地址
// @param program 指定包含顶点或者片元着色器的程序对象
// @param name 获取其存储的 attribute 变量名称，最大长度256字节
[WebGLHandlesContextLoss] GLint getAttribLocation(WebGLProgram program, DOMString name);

// 绑定顶点索引到属性变量
// 使用缓冲区数据的时候需要用到的方法
// @param index 指定要绑定的通用顶点的索引 这个值直接赋值给 vertexAttribPointer 的 index 参数
// @param name 指定变量名
// 这里的 index 和 getAttribLocation 返回值是一样的
void bindAttribLocation(WebGLProgram program, GLuint index, DOMString name);

// 将数据传给由index参数指定的attribute变量
void vertexAttrib1f(GLuint index, GLfloat x);
void vertexAttrib2f(GLuint index, GLfloat x, GLfloat y);
void vertexAttrib3f(GLuint index, GLfloat x, GLfloat y, GLfloat z);
void vertexAttrib4f(GLuint index, GLfloat x, GLfloat y, GLfloat z, GLfloat w);
// 接收参数为 Float32Array 数组
void vertexAttrib1fv(GLuint index, Float32List values);
void vertexAttrib2fv(GLuint index, Float32List values);
void vertexAttrib3fv(GLuint index, Float32List values);
void vertexAttrib4fv(GLuint index, Float32List values);

uniform 相关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* Uniform Types */
const GLenum FLOAT_VEC2                     = 0x8B50;
const GLenum FLOAT_VEC3                     = 0x8B51;
const GLenum FLOAT_VEC4                     = 0x8B52;
const GLenum INT_VEC2                       = 0x8B53;
const GLenum INT_VEC3                       = 0x8B54;
const GLenum INT_VEC4                       = 0x8B55;
const GLenum BOOL                           = 0x8B56;
const GLenum BOOL_VEC2                      = 0x8B57;
const GLenum BOOL_VEC3                      = 0x8B58;
const GLenum BOOL_VEC4                      = 0x8B59;
const GLenum FLOAT_MAT2                     = 0x8B5A;
const GLenum FLOAT_MAT3                     = 0x8B5B;
const GLenum FLOAT_MAT4                     = 0x8B5C;
const GLenum SAMPLER_2D                     = 0x8B5E;
const GLenum SAMPLER_CUBE                   = 0x8B60;

// 获取指定名称的 uniform 变量存储位置
// @param program 制定的包含顶点或者片元着色器的程序对象
// @param name 指定想要获取其存储位置的uniform变量名称 最大长度256字节
WebGLUniformLocation? getUniformLocation(WebGLProgram program, DOMString name);

// 将数据传给location指定的uniform变量
void uniform1f(WebGLUniformLocation? location, GLfloat x);
void uniform2f(WebGLUniformLocation? location, GLfloat x, GLfloat y);
void uniform3f(WebGLUniformLocation? location, GLfloat x, GLfloat y, GLfloat z);
void uniform4f(WebGLUniformLocation? location, GLfloat x, GLfloat y, GLfloat z, GLfloat w);

void uniform1i(WebGLUniformLocation? location, GLint x);
void uniform2i(WebGLUniformLocation? location, GLint x, GLint y);
void uniform3i(WebGLUniformLocation? location, GLint x, GLint y, GLint z);
void uniform4i(WebGLUniformLocation? location, GLint x, GLint y, GLint z, GLint w);

void uniform1fv(WebGLUniformLocation? location, Float32List v);
void uniform2fv(WebGLUniformLocation? location, Float32List v);
void uniform3fv(WebGLUniformLocation? location, Float32List v);
void uniform4fv(WebGLUniformLocation? location, Float32List v);

void uniform1iv(WebGLUniformLocation? location, Int32List v);
void uniform2iv(WebGLUniformLocation? location, Int32List v);
void uniform3iv(WebGLUniformLocation? location, Int32List v);
void uniform4iv(WebGLUniformLocation? location, Int32List v);

// @param 是否对矩阵进行转置 默认 false 在webgl中必须是false
void uniformMatrix2fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);
void uniformMatrix3fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);
void uniformMatrix4fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);

texture 相关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
// pixelStorei 中参数pname取值

// 对图像进行Y轴反转，默认false
const GLenum UNPACK_FLIP_Y_WEBGL            = 0x9240; 
// 将图像RGB颜色值每一个分量乘以A 默认false
const GLenum UNPACK_PREMULTIPLY_ALPHA_WEBGL = 0x9241; 

// activeTexture 方法使用的枚举常量
const GLenum TEXTURE0                       = 0x84C0;
const GLenum TEXTURE1                       = 0x84C1;
const GLenum TEXTURE2                       = 0x84C2;
const GLenum TEXTURE3                       = 0x84C3;
const GLenum TEXTURE4                       = 0x84C4;
const GLenum TEXTURE5                       = 0x84C5;
const GLenum TEXTURE6                       = 0x84C6;
const GLenum TEXTURE7                       = 0x84C7;
const GLenum TEXTURE8                       = 0x84C8;
const GLenum TEXTURE9                       = 0x84C9;
const GLenum TEXTURE10                      = 0x84CA;
const GLenum TEXTURE11                      = 0x84CB;
const GLenum TEXTURE12                      = 0x84CC;
const GLenum TEXTURE13                      = 0x84CD;
const GLenum TEXTURE14                      = 0x84CE;
const GLenum TEXTURE15                      = 0x84CF;
const GLenum TEXTURE16                      = 0x84D0;
const GLenum TEXTURE17                      = 0x84D1;
const GLenum TEXTURE18                      = 0x84D2;
const GLenum TEXTURE19                      = 0x84D3;
const GLenum TEXTURE20                      = 0x84D4;
const GLenum TEXTURE21                      = 0x84D5;
const GLenum TEXTURE22                      = 0x84D6;
const GLenum TEXTURE23                      = 0x84D7;
const GLenum TEXTURE24                      = 0x84D8;
const GLenum TEXTURE25                      = 0x84D9;
const GLenum TEXTURE26                      = 0x84DA;
const GLenum TEXTURE27                      = 0x84DB;
const GLenum TEXTURE28                      = 0x84DC;
const GLenum TEXTURE29                      = 0x84DD;
const GLenum TEXTURE30                      = 0x84DE;
const GLenum TEXTURE31                      = 0x84DF;

// bindTexture texParameterf texParameteri texImage2D 的 target 参数
const GLenum TEXTURE_2D                     = 0x0DE1;
const GLenum TEXTURE_CUBE_MAP               = 0x8513;

// texParameterf pname 参数
// texParameteri pname 参数
const GLenum TEXTURE_MAG_FILTER             = 0x2800;
const GLenum TEXTURE_MIN_FILTER             = 0x2801;
const GLenum TEXTURE_WRAP_S                 = 0x2802;
const GLenum TEXTURE_WRAP_T                 = 0x2803;

// texParameterf param 参数 当 pname = TEXTURE_MAG_FILTER | TEXTURE_MIN_FILTER
// texParameteri param 参数 当 pname = TEXTURE_MAG_FILTER | TEXTURE_MIN_FILTER
// 以下是非金字塔纹理常量
// 使用原纹理上距离映射后像素（新像素）中心最近的那个像素的颜色值，作为新像素的值（使用曼哈顿距离）
// 曼哈顿距离又称直角距离、棋盘距离。如(x1, y1) (x2, y2)的曼哈顿距离是 |x1 - x2| + |y1 - y2|
const GLenum NEAREST                        = 0x2600;
// 使用距离新像素中心最近的四个像素的颜色值得加权平均，作为新像素的值（与 NEAREST对比，该方法图像质量更好，但是会有比较大的开销）
const GLenum LINEAR                         = 0x2601;
// 以下是金字塔纹理常量
const GLenum NEAREST_MIPMAP_NEAREST         = 0x2700;
const GLenum LINEAR_MIPMAP_NEAREST          = 0x2701;
const GLenum NEAREST_MIPMAP_LINEAR          = 0x2702;
const GLenum LINEAR_MIPMAP_LINEAR           = 0x2703;

// texParameterf param 参数 当 pname = TEXTURE_WRAP_S | TEXTURE_WRAP_T
// texParameteri param 参数 当 pname = TEXTURE_WRAP_S | TEXTURE_WRAP_T

// 平铺式的重复纹理
const GLenum REPEAT                         = 0x2901; 
// 镜像对称式的重复纹理
const GLenum CLAMP_TO_EDGE                  = 0x812F; 
// 使用纹理图像的边缘值
const GLenum MIRRORED_REPEAT                = 0x8370; 

// texImage2D 的 internalformat 参数
const GLenum ALPHA                          = 0x1906;
const GLenum RGB                            = 0x1907;
const GLenum RGBA                           = 0x1908;
const GLenum LUMINANCE                      = 0x1909;
const GLenum LUMINANCE_ALPHA                = 0x190A;

// texImage2D 的 type 参数
// 前文已定义
const GLenum UNSIGNED_BYTE; 
// RGBA
const GLenum UNSIGNED_SHORT_4_4_4_4         = 0x8033; 
// RGBA
const GLenum UNSIGNED_SHORT_5_5_5_1         = 0x8034; 
// RGB
const GLenum UNSIGNED_SHORT_5_6_5           = 0x8363; 

// 创建纹理对象以存储纹理图像
WebGLTexture? createTexture();

// 使用texture删除纹理对象
void deleteTexture(WebGLTexture? texture);

// 使用 pname 和 param 指定的方式加载得到的图像
// @param pname 见上面的枚举
// @param param 指定 非0为true、0为false 必须是整数
void pixelStorei(GLenum pname, GLint param);

// 激活纹理单元 参数是常量 gl.TEXTURE<I> 见上面枚举
void activeTexture(GLenum texture);

// 开启 texture 指定的纹理对象，并将其绑定到 target 上。 
// 如果已经通过 gl.activeTexture 激活了某个纹理单元，则纹理对象也会绑定到这个纹理单元上
// @param target 绑定类型 TEXTURE_CUBE_MAP（立方体纹理） | TEXTURE_2D （平面纹理）
// @param texture 绑定的纹理单元
void bindTexture(GLenum target, WebGLTexture? texture);

// 配置纹理，将param值赋给绑定到目标的纹理对象的pname参数上
// @param target 同上
// @param pname 见上面枚举 纹理参数
// @param param 见上面枚举 纹理参数的值
void texParameterf(GLenum target, GLenum pname, GLfloat param);
void texParameteri(GLenum target, GLenum pname, GLint param);

// 将 source 指定的图像分配给绑定到目标上的纹理对象
// @param target 同上
// @param level 传入0 （该参数是为金字塔纹理准备的）
// @param internalformat 图像的内部格式 见上枚举
// @param format 纹理数据的格式 必须使用与 internalformat 相同的值
// @param type 纹理数据的类型
// @param source 包含纹理图像的Image对象
// May throw DOMException
void texImage2D(GLenum target, GLint level, GLint internalformat, GLenum format, GLenum type, TexImageSource source);
void texImage2D(GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);

// 指定一个为压缩格式的2D纹理图片。
void compressedTexImage2D(GLenum target, GLint level, GLenum internalformat, GLsizei width, GLsizei height, GLint border, [AllowShared] ArrayBufferView data);
// 指定一个为压缩格式的2D纹理子图片。
void compressedTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, [AllowShared] ArrayBufferView data);
// 复制2D纹理图片。
void copyTexImage2D(GLenum target, GLint level, GLenum internalformat, GLint x, GLint y, GLsizei width, GLsizei height, GLint border);
// 复制2D纹理子图片。
void copyTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLint x, GLint y, GLsizei width, GLsizei height);

// 为 WebGLTexture 对象生成一组mip纹理映射。
void generateMipmap(GLenum target);

// 更新当前 WebGLTexture 的子矩形。
void texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);
void texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLenum format, GLenum type, TexImageSource source); // May throw DOMException

// 最后指定纹理单元编号
// gl.uniform1i(sampler, 0);

启用功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// enable disable 的 cap 参数
const GLenum CULL_FACE                      = 0x0B44;
// 混合
const GLenum BLEND                          = 0x0BE2;
const GLenum DITHER                         = 0x0BD0;
const GLenum STENCIL_TEST                   = 0x0B90;
// 隐藏面消除
const GLenum DEPTH_TEST                     = 0x0B71;
const GLenum SCISSOR_TEST                   = 0x0C11;
// 多边形位移 （解决深度冲突问题）
const GLenum POLYGON_OFFSET_FILL            = 0x8037;
const GLenum SAMPLE_ALPHA_TO_COVERAGE       = 0x809E;
const GLenum SAMPLE_COVERAGE                = 0x80A0;

// 启用功能
void enable(GLenum cap);

// 关闭功能
void disable(GLenum cap);

// 解决深度冲突
// gl.enable(POLYGON_OFFSET_FILL);
// 指定加到每个顶点绘制后Z值上的偏移量，偏移量按照公式 m * factor + r * units 计算，其中m代表顶点所在表面
// 相对于观察者的实现角度，而r表示硬件能够区分两个Z值之差的最小值
void polygonOffset(GLfloat factor, GLfloat units);

// 虽然上面的方法可以使用，但是在渲染器中用起来还是很麻烦的。
// 解决深度冲突有更好的方式，就是缩小远近裁剪面的距离

着色器相关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// createShader 的 type 参数
const GLenum FRAGMENT_SHADER                  = 0x8B30;
const GLenum VERTEX_SHADER                    = 0x8B31;

// getShaderParameter 的 pname 参数
const GLenum SHADER_TYPE                      = 0x8B4F;
const GLenum DELETE_STATUS                    = 0x8B80;
const GLenum COMPILE_STATUS                   = 0x8B81;

// 创建由type指定的着色器对象
// @param type 见上枚举
WebGLShader? createShader(GLenum type);

// 删除 shader 指定的着色器对象
void deleteShader(WebGLShader? shader);

// 将 source 指定的字符串形式的代码传入shader指定的着色器 如果之前已经向shader传入了代码 旧的代码就会被替换掉
void shaderSource(WebGLShader shader, DOMString source);

// 编译 shader 指定的着色器中的源代码
void compileShader(WebGLShader shader);

// 获取 shader 指定的着色器中 pname 指定的参数信息
// @param pname 见上枚举
any getShaderParameter(WebGLShader shader, GLenum pname);

// 如果 getShaderParameter(shader, COMPILE_STATUS) 返回false 
// 则可以通过 此函数获取 指定shader 的信息日志
DOMString? getShaderInfoLog(WebGLShader shader);

着色器程序相关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// getProgramParameter 的 pname 参数
// 着色器相关 章节已定义
const GLenum DELETE_STATUS; 
const GLenum LINK_STATUS                      = 0x8B82;
const GLenum VALIDATE_STATUS                  = 0x8B83;
const GLenum ATTACHED_SHADERS                 = 0x8B85;
const GLenum ACTIVE_UNIFORMS                  = 0x8B86;
const GLenum ACTIVE_ATTRIBUTES                = 0x8B89;

// 创建着色器程序对象
WebGLProgram? createProgram();

// 删除着色器程序对象
void deleteProgram(WebGLProgram? program);

// 将 shader 指定的着色器对象分配给 program 指定的程序对象
void attachShader(WebGLProgram program, WebGLShader shader);

// 取消 shader 指定的着色器对 program 对象的分配
void detachShader(WebGLProgram program, WebGLShader shader);

// 连接 program 指定的程序对象中的着色器
// 目的：
// 1. 保证顶点着色器 和 片元着色器的varying变量同名同类型，且一一对应
// 2. 保证顶点着色器对每个varying变量赋了值
// 3. 保证顶点着色器 和 片元着色器中的同名 uniform 变量也是同类型的 无需一一对应
// 4. 保证着色器中的attribute、uniform、varying变量的个数没有超过着色器上限
void linkProgram(WebGLProgram program);

// 获取 program 指定的程序对象中 pname 指定的参数信息
// @param pname 见上枚举
any getProgramParameter(WebGLProgram program, GLenum pname);

// 如果通过 getProgramParameter(LINK_STATUS) 获得返回值 为 false
// 可以通过 此函数获取 program 指定的程序对象的信息日志
DOMString? getProgramInfoLog(WebGLProgram program);

// 验证 WebGLProgram 
void validateProgram(WebGLProgram program);

// 告知 WEBGL 系统绘制时使用的 program 对象
void useProgram(WebGLProgram? program);

获取着色器程序相关代码

1
2
3
4
5
6
7
8
const program = gl.createProgram();
gl.attacheShader(program, vertexShader);
gl.attacheShader(program, fragmentShader);
gl.linkProgram(program);
if(!gl.getProgramParameter(program, gl.LINK_STATUS)){
  var info = gl.getProgramInfoLog(program);
  throw new Error('Could not compile WebGL program. \n\n ' + info);
}

绘制相关方法

绘制缓存中的顶点数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 绘制的类型
// 为 gl.drawArrays、gl.drawElements 第一个参数
const GLenum POINTS                         = 0x0000;
const GLenum LINES                          = 0x0001;
const GLenum LINE_LOOP                      = 0x0002;
const GLenum LINE_STRIP                     = 0x0003;
const GLenum TRIANGLES                      = 0x0004;
const GLenum TRIANGLE_STRIP                 = 0x0005;
const GLenum TRIANGLE_FAN                   = 0x0006;

// 执行绘制， 按照mode参数指定的方式绘制图形
// @param model 绘制模式。
// @param first 指定从哪个定点开始绘制
// @param count 指定绘制需要用到多少个顶点
void drawArrays(GLenum mode, GLint first, GLsizei count);

// 执行绘制，按照mode参数制定的方式，根据绑定到 ELEMENT_ARRAY_BUFFER 的缓冲区中的顶点索引绘制图形
// @param model 绘制模式。
// @param count 指定绘制顶点的个数
// @param type 指定索引值数据类型。包括：UNSIGNED_BYTE、UNSIGNED_SHORT、UNSIGNED_INT
// @param offset 指定索引数组中绘制的偏移位置，以字节为单位
void drawElements(GLenum mode, GLsizei count, GLenum type, GLintptr offset);

查询状态参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
// 获取当前激活的材质枚举值 getParameter
const GLenum ACTIVE_TEXTURE                 = 0x84E0;
// 获取材质最大支持数量 getParameter
const GLenum MAX_COMBINED_TEXTURE_IMAGE_UNITS = 0x8B4D;

// 顶点着色器可使用最大 attribute 数量
const GLenum MAX_VERTEX_ATTRIBS               = 0x8869;
// 顶点着色器可使用 uniform 最大数量
const GLenum MAX_VERTEX_UNIFORM_VECTORS       = 0x8DFB;
// 可使用最大 varying 变量数量
const GLenum MAX_VARYING_VECTORS              = 0x8DFC;
// 顶点着色器纹理单元最大数量
const GLenum MAX_VERTEX_TEXTURE_IMAGE_UNITS   = 0x8B4C;
// 片元着色器纹理单元最大数量
const GLenum MAX_TEXTURE_IMAGE_UNITS          = 0x8872;
// 当前片元着色器可使用 uniform 最大数量
const GLenum MAX_FRAGMENT_UNIFORM_VECTORS     = 0x8DFD;

// 着色器语言版本
const GLenum SHADING_LANGUAGE_VERSION         = 0x8B8C;
// 当前运行的着色器程序
const GLenum CURRENT_PROGRAM                  = 0x8B8D;

// 获取混合方程
const GLenum BLEND_EQUATION                 = 0x8009;
const GLenum BLEND_EQUATION_RGB             = 0x8009;   /* same as BLEND_EQUATION */
const GLenum BLEND_EQUATION_ALPHA           = 0x883D;

// 面消除查询
const GLenum CULL_FACE_MODE                 = 0x0B45;

/* Separate Blend Functions */
const GLenum BLEND_DST_RGB                  = 0x80C8;
const GLenum BLEND_SRC_RGB                  = 0x80C9;
const GLenum BLEND_DST_ALPHA                = 0x80CA;
const GLenum BLEND_SRC_ALPHA                = 0x80CB;
const GLenum CONSTANT_COLOR                 = 0x8001;
const GLenum ONE_MINUS_CONSTANT_COLOR       = 0x8002;
const GLenum CONSTANT_ALPHA                 = 0x8003;
const GLenum ONE_MINUS_CONSTANT_ALPHA       = 0x8004;
const GLenum BLEND_COLOR                    = 0x8005;

// buffer
const GLenum BUFFER_SIZE                    = 0x8764;
const GLenum BUFFER_USAGE                   = 0x8765;

const GLenum CURRENT_VERTEX_ATTRIB          = 0x8626;

/* ErrorCode */
const GLenum NO_ERROR                       = 0;
const GLenum INVALID_ENUM                   = 0x0500;
const GLenum INVALID_VALUE                  = 0x0501;
const GLenum INVALID_OPERATION              = 0x0502;
const GLenum OUT_OF_MEMORY                  = 0x0505;

/* GetPName */
const GLenum LINE_WIDTH                     = 0x0B21;
const GLenum ALIASED_POINT_SIZE_RANGE       = 0x846D;
const GLenum ALIASED_LINE_WIDTH_RANGE       = 0x846E;

const GLenum FRONT_FACE                     = 0x0B46;
const GLenum DEPTH_RANGE                    = 0x0B70;
const GLenum DEPTH_WRITEMASK                = 0x0B72;
const GLenum DEPTH_CLEAR_VALUE              = 0x0B73;
const GLenum DEPTH_FUNC                     = 0x0B74;
const GLenum STENCIL_CLEAR_VALUE            = 0x0B91;
const GLenum STENCIL_FUNC                   = 0x0B92;
const GLenum STENCIL_FAIL                   = 0x0B94;
const GLenum STENCIL_PASS_DEPTH_FAIL        = 0x0B95;
const GLenum STENCIL_PASS_DEPTH_PASS        = 0x0B96;
const GLenum STENCIL_REF                    = 0x0B97;
const GLenum STENCIL_VALUE_MASK             = 0x0B93;
const GLenum STENCIL_WRITEMASK              = 0x0B98;
const GLenum STENCIL_BACK_FUNC              = 0x8800;
const GLenum STENCIL_BACK_FAIL              = 0x8801;
const GLenum STENCIL_BACK_PASS_DEPTH_FAIL   = 0x8802;
const GLenum STENCIL_BACK_PASS_DEPTH_PASS   = 0x8803;
const GLenum STENCIL_BACK_REF               = 0x8CA3;
const GLenum STENCIL_BACK_VALUE_MASK        = 0x8CA4;
const GLenum STENCIL_BACK_WRITEMASK         = 0x8CA5;
const GLenum VIEWPORT                       = 0x0BA2;
const GLenum SCISSOR_BOX                    = 0x0C10;

/* SCISSOR_TEST */
const GLenum COLOR_CLEAR_VALUE              = 0x0C22;
const GLenum COLOR_WRITEMASK                = 0x0C23;
const GLenum UNPACK_ALIGNMENT               = 0x0CF5;
const GLenum PACK_ALIGNMENT                 = 0x0D05;
const GLenum MAX_TEXTURE_SIZE               = 0x0D33;
const GLenum MAX_VIEWPORT_DIMS              = 0x0D3A;
const GLenum SUBPIXEL_BITS                  = 0x0D50;
const GLenum RED_BITS                       = 0x0D52;
const GLenum GREEN_BITS                     = 0x0D53;
const GLenum BLUE_BITS                      = 0x0D54;
const GLenum ALPHA_BITS                     = 0x0D55;
const GLenum DEPTH_BITS                     = 0x0D56;
const GLenum STENCIL_BITS                   = 0x0D57;
const GLenum POLYGON_OFFSET_UNITS           = 0x2A00;
/* POLYGON_OFFSET_FILL */
const GLenum POLYGON_OFFSET_FACTOR          = 0x8038;
const GLenum TEXTURE_BINDING_2D             = 0x8069;
const GLenum SAMPLE_BUFFERS                 = 0x80A8;
const GLenum SAMPLES                        = 0x80A9;
const GLenum SAMPLE_COVERAGE_VALUE          = 0x80AA;
const GLenum SAMPLE_COVERAGE_INVERT         = 0x80AB;

const GLenum COMPRESSED_TEXTURE_FORMATS     = 0x86A3;

/* PixelFormat */
const GLenum DEPTH_COMPONENT                = 0x1902;

/* StringName */
const GLenum VENDOR                         = 0x1F00;
const GLenum RENDERER                       = 0x1F01;
const GLenum VERSION                        = 0x1F02;

const GLenum TEXTURE                        = 0x1702;

const GLenum TEXTURE_BINDING_CUBE_MAP       = 0x8514;
const GLenum TEXTURE_CUBE_MAP_POSITIVE_X    = 0x8515;
const GLenum TEXTURE_CUBE_MAP_NEGATIVE_X    = 0x8516;
const GLenum TEXTURE_CUBE_MAP_POSITIVE_Y    = 0x8517;
const GLenum TEXTURE_CUBE_MAP_NEGATIVE_Y    = 0x8518;
const GLenum TEXTURE_CUBE_MAP_POSITIVE_Z    = 0x8519;
const GLenum TEXTURE_CUBE_MAP_NEGATIVE_Z    = 0x851A;
const GLenum MAX_CUBE_MAP_TEXTURE_SIZE      = 0x851C;

/* Vertex Arrays */
const GLenum VERTEX_ATTRIB_ARRAY_ENABLED        = 0x8622;
const GLenum VERTEX_ATTRIB_ARRAY_SIZE           = 0x8623;
const GLenum VERTEX_ATTRIB_ARRAY_STRIDE         = 0x8624;
const GLenum VERTEX_ATTRIB_ARRAY_TYPE           = 0x8625;
const GLenum VERTEX_ATTRIB_ARRAY_NORMALIZED     = 0x886A;
const GLenum VERTEX_ATTRIB_ARRAY_POINTER        = 0x8645;
const GLenum VERTEX_ATTRIB_ARRAY_BUFFER_BINDING = 0x889F;

/* Read Format */
const GLenum IMPLEMENTATION_COLOR_READ_TYPE   = 0x8B9A;
const GLenum IMPLEMENTATION_COLOR_READ_FORMAT = 0x8B9B;

/* Shader Precision-Specified Types */
const GLenum LOW_FLOAT                      = 0x8DF0;
const GLenum MEDIUM_FLOAT                   = 0x8DF1;
const GLenum HIGH_FLOAT                     = 0x8DF2;
const GLenum LOW_INT                        = 0x8DF3;
const GLenum MEDIUM_INT                     = 0x8DF4;
const GLenum HIGH_INT                       = 0x8DF5;

const GLenum DEPTH_STENCIL                  = 0x84F9;

const GLenum RENDERBUFFER_WIDTH             = 0x8D42;
const GLenum RENDERBUFFER_HEIGHT            = 0x8D43;
const GLenum RENDERBUFFER_INTERNAL_FORMAT   = 0x8D44;
const GLenum RENDERBUFFER_RED_SIZE          = 0x8D50;
const GLenum RENDERBUFFER_GREEN_SIZE        = 0x8D51;
const GLenum RENDERBUFFER_BLUE_SIZE         = 0x8D52;
const GLenum RENDERBUFFER_ALPHA_SIZE        = 0x8D53;
const GLenum RENDERBUFFER_DEPTH_SIZE        = 0x8D54;
const GLenum RENDERBUFFER_STENCIL_SIZE      = 0x8D55;

const GLenum FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE           = 0x8CD0;
const GLenum FRAMEBUFFER_ATTACHMENT_OBJECT_NAME           = 0x8CD1;
const GLenum FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL         = 0x8CD2;
const GLenum FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE = 0x8CD3;

const GLenum NONE                           = 0;

const GLenum FRAMEBUFFER_COMPLETE                      = 0x8CD5;
const GLenum FRAMEBUFFER_INCOMPLETE_ATTACHMENT         = 0x8CD6;
const GLenum FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT = 0x8CD7;
const GLenum FRAMEBUFFER_INCOMPLETE_DIMENSIONS         = 0x8CD9;
const GLenum FRAMEBUFFER_UNSUPPORTED                   = 0x8CDD;

const GLenum FRAMEBUFFER_BINDING            = 0x8CA6;
const GLenum RENDERBUFFER_BINDING           = 0x8CA7;
const GLenum MAX_RENDERBUFFER_SIZE          = 0x84E8;

const GLenum INVALID_FRAMEBUFFER_OPERATION  = 0x0506;

const GLenum CONTEXT_LOST_WEBGL                 = 0x9242;
const GLenum UNPACK_COLORSPACE_CONVERSION_WEBGL = 0x9243;
const GLenum BROWSER_DEFAULT_WEBGL              = 0x9244;

// 通过查询参数获取值
any getParameter(GLenum pname);
any getTexParameter(GLenum target, GLenum pname);
// 查询着色器相关参数
any getShaderParameter(WebGLShader shader, GLenum pname);
// 查询着色器程序相关参数
any getProgramParameter(WebGLProgram program, GLenum pname);
// 返回激活状态的attribute变量信息。
WebGLActiveInfo? getActiveAttrib(WebGLProgram program, GLuint index);
// 返回激活状态的uniform 变量信息。
WebGLActiveInfo? getActiveUniform(WebGLProgram program, GLuint index);
// 返回附加在 WebGLProgram 上的 WebGLShader 对象的列表
sequence<WebGLShader>? getAttachedShaders(WebGLProgram program);
// 返回缓冲信息。
any getBufferParameter(GLenum target, GLenum pname);
// 返回错误信息。
[WebGLHandlesContextLoss] GLenum getError();
// 返回帧缓冲区的信息。
any getFramebufferAttachmentParameter(GLenum target, GLenum attachment, GLenum pname);
// 返回渲染缓冲区的信息。
any getRenderbufferParameter(GLenum target, GLenum pname);
// 返回一个描述着色器数字类型精度的WebGLShaderPrecisionFormat 对象。
WebGLShaderPrecisionFormat? getShaderPrecisionFormat(GLenum shadertype, GLenum precisiontype);
// 以字符串形式返回 WebGLShader 的源码。
DOMString? getShaderSource(WebGLShader shader);
// 返回指定位置的uniform 变量。
any getUniform(WebGLProgram program, WebGLUniformLocation location);
// 返回指定位置的顶点attribute变量。
any getVertexAttrib(GLuint index, GLenum pname);
// 获取给定索引的顶点attribute位置。
[WebGLHandlesContextLoss] GLintptr getVertexAttribOffset(GLuint index, GLenum pname);

扩展

通过扩展基本上能使 WebGL1 拥有 WebGL2 的能力。

  1. 获取扩展以及扩展支持信息
1
2
3
4
// 获取扩展
object? getExtension(DOMString name);
// 获取扩展支持信息
sequence<DOMString>? getSupportedExtensions();
  1. 使用扩展字符串获取扩展对象
扩展名 说明
ANGLE_instanced_arrays 允许绘制多次同样的一个或者多个对象
条件：分享顶点数据、原始计数和类型
EXT_blend_minmax 通过添加两个新的混合方程来扩展混合能力
EXT_color_buffer_float 添加渲染各种浮点格式的能力
EXT_color_buffer_half_float 添加渲染各种16位浮点格式的能力
EXT_disjoint_timer_query 提供一种测量一组GL命令的持续时间的方法，
不会影响渲染管道的稳定性
EXT_frag_depth 能够在片段着色器中设置片段深度值
EXT_sRGB 为 FrameBuffer 提供sRGB支持
EXT_shader_texture_lod 为着色器提供LOD能力
EXT_texture_filter_anisotropic 提高斜角观察质量
OES_element_index_uint 使 drawElements 支持 UNSIGNED_INT 类型
OES_standard_derivatives 为着色器提供 dFdx/dFdy/fwidth 函数
OES_texture_float 为材质添加 FLOAT 类型
OES_texture_float_linear 允许材质的线性过滤
OES_texture_half_float 为材质添加 16 位支持
OES_texture_half_float_linear 允许16 位材质精度的线性过滤
OES_vertex_array_object 提供压缩顶点数组的方法，指向不同顶点数据缓存
WEBGL_color_buffer_float 允许输出32位颜色缓冲
WEBGL_compressed_texture_astc exposes Adaptive Scalable Texture Compression (ASTC) compressed texture formats to WebGL.
WEBGL_compressed_texture_atc exposes 3 ATC compressed texture formats.
WEBGL_compressed_texture_etc exposes 10 ETC/EAC compressed texture formats
WEBGL_compressed_texture_etc1 exposes the ETC1 compressed texture format.
WEBGL_compressed_texture_pvrtc exposes four PVRTC compressed texture formats.
WEBGL_compressed_texture_s3tc exposes four S3TC compressed texture formats.
WEBGL_compressed_texture_s3tc_srgb exposes four S3TC compressed texture formats for the sRGB colorspace.
WEBGL_debug_renderer_info 获取渲染信息（公司等）
WEBGL_debug_shaders 获取着色器源码信息
WEBGL_depth_texture 定义深度和深度模板材质
WEBGL_draw_buffers 允许着色器一次性输出多张材质，对延迟渲染大有帮助
WEBGL_lose_context 暴露上下文丢失和恢复函数

引用

  • WebGLRenderingContext

另外：欢迎邮件交流。

#WebGL #API

Copyright © 2021 zhoyq.com. All rights reserved.

京ICP备 17068495号-1